body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.avatar{
    background: url('../imgs/test.jpg') center/cover;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}
.avatar::before,.avatar::after{
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.avatar::before{
    background: rgba(0,0,0,0.5);   
}
.avatar::after{
    background: inherit;
    clip-path: circle(0% at 50% 50%);
    transition: 0.5s;
}
.avatar:hover::after{
    clip-path: circle(50% at 50% 50%);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in-element {
  animation: fadeIn 1s ease-in-out both;
  animation-timeline: scroll(root auto);
  scroll-offset: entry 30%;
}
.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-mask-image: radial-gradient(circle, transparent 30%, white 70%);
}